AWS Amplifyコンソールを使ってHugoベースの静的サイトを構築

quiver

2019.03.15

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

re:invent2018で発表された AWS Amplify コンソールは、モバイルウェブアプリケーション用の継続的デプロイおよびホスティングサービスです。

このサービスと静的サイトジェネレーター(以下 SSG)の Hugo を連携し、独自ドメインでサイトをホストする方法を紹介します。

AWS Amplify Consoleの管理画面でポチポチやるだけで、下図のような構成の継続的デプロイ・サイトホスティングを実現できます。

前提

AWS Amplify は以下のリージョンでのみ利用です。

EU (London)
EU (Ireland)
Asia Pacific (Sydney)
US East (N. Virginia)
US East (Ohio)
US West (Oregon)

特に、東京リージョンではまだ利用できません。

今回は EU (Ireland) リージョンを利用しました。

また、

ソースコードは GitHub で管理
Route 53 でドメインを管理

しているものとします。

Step 1 : Hugo 用のコンテンツを用意

ビルド&デプロイする Hugo の元データを用意し、GitHub で管理します。

注意点としては、レポジトリからソースコードを取得する際、サブモジュールは取得できないようです。

例えば、別レポジトリで管理されているテーマを利用したい場合、サブモジュールは利用しないようにしてください。

参考 Pipeline Error: My GitHub source stage contains Git submodules, but CodePipeline doesn't initialize them

Step 2 : Amplify アプリを作成

AWS 管理コンソールから Amplify アプリを作成します。

AWS Amplify トップページから "GET STARTED" のリンクをクリックします。

レポジトリサービスに GitHub を選択し、レポジトリとブランチを指定します。

ビルド手順を指定します。

AWS Amplify はレポジトリのソースコードをもとに、手順を自動生成します。

Hugo の場合、フレームワークが自動認識され、以下のビルド手順が自動生成されました。

version: 0.1
frontend:
  phases:
    build:
      commands:
        - hugo
  artifacts:
    baseDirectory: public
    files:
      - '**/*'
  cache:
    paths: []

この設定は、ソースコードを取得後、 $ hugoコマンドを実行し、public ディレクトリ以下のソースコードを artifact として利用するということを意味します。

仕様が AWS CodeBuild に似ていますね。詳細は次のドキュメントを参照ください。

Configuring Build Settings - AWS Amplify

最後に、設定内容を確認し、"save & deploy" ボタンを押せば、終了です。

Provision & Build & Deploy & Verify とすべて緑のチェックが入れば、成功です。

アクセス用の一意なドメインが生成されます。

https://BRANCHNAME.RANDOM-LETTER.amplifyapp.com/

そのドメインから、静的出力されたサイトにアクセスし、期待通り、サイト生成されていることを確認します。

cURL でアクエスし、ヘッダーを確認します

$ curl -I https://BRANCHNAME.RANDOM-LETTER.amplifyapp.com/
HTTP/1.1 200 OK
Content-Type: text/html
Content-Length: 3816
Connection: keep-alive
Date: Thu, 14 Mar 2019 15:57:14 GMT
Last-Modified: Thu, 14 Mar 2019 12:34:01 GMT
ETag: "388935254ee4654a98ded5165046d13c"
Cache-Control: public, must-revalidate, max-age=0
Accept-Ranges: bytes
Server: AmazonS3
Via: 1.1 dummy0fef99ccf6faacc3588fcd922.cloudfront.net (CloudFront), 1.1 dummy145504681917f09b3c2bed61f9.cloudfront.net (CloudFront)
Vary: Accept-Encoding,Accept-Encoding
X-Cache: Miss from cloudfront

オリジンが S3 であり、 CloudFront 経由で配信されていることがわかります。

通常、CloudFrontのディストリビューションを新規作成すると、10分はかかるイメージがありますが、AWS Amplify の場合、数分で完了します。

AWS Amplify では、スマートな instant cache invalidation ができたりと、モバイル開発のフットワークの軽さと相性がいいように、通常とは異なるキャッシュサーバーで動作しているのかもしれません。

Step 3 : 独自ドメインを設定

デフォルトでは amplifyapp.com のサブドメインが割り振られるため、カスタムドメインを設定します。

DNS 設定は、メニューの「App settings→ Domain management」から行います。

このメニューを開くと、初期状態では、アプリ作成時に割り振られたドメインだけが存在します。

"Add Domain" から自分の管理するドメインを選択し、サブドメインのレコードを追加します。

Amplify Console の Custom domain 一覧には追加したサブドメインが追加され、Status が AVAILABLE になれば、設定完了です。カスタムドメインでアクセスできることを確認してください。

Domain Managementの設定は、裏で Route53 と連動しています。

Route 53 を確認すると

Hugo を配信するサブドメイン(CloudFront のCNAME)
ACM(無料のTLS 証明書サービス)のDNS検証用ドメイン

のレコードが追加されていました。

なお、CloudFrontとACM のリソースは、ユーザーのAWSアカウントには作成されません。

別ブランチ用パイプラインも作成

運用によっては、本番環境に反映する前に、開発環境で一旦レビューを行うワークフローを採用しているケースがあります。

そのようなケースのために、開発用ブランチをデプロイするパイプラインも用意してみましょう。

先程作成したアプリのトップページで "Coonect branch" のボタンをクリックします。

ブランチの選択画面が表示されるため、プルダウンから新規にデプロイしたいブランチ(今回はdevelop)を選択するだけです。

先程と同じく、amplify 専用のドメインが割り振られるため、Domain management からカスタムドメインを割り振ります。

追加したドメインが AVAILABLE になれば設定完了です。

このドメインにアクセスし、選択したブランチのコンテンツが表示されていることを確認してください。

開発環境ということを考慮し、Basic認証によるアクセス制限をかけることもできます。

AWS Amplify Console の利用費を試算する

AWS Amplify Console は従量課金を採用しています。

種類	利用費	ビリングレポートの項目	参考価格
BUILD & DEPLOY	$0.01/ビルド時間	$0.01 per build minute (4 vCPU, 7 GB Memory)	CodeBuild の build.general1.medium(4 vCPU, 7GB Memory)は $0.01 per build minute(Linux)
artifacts ストレージ	$0.023/GB	$0.023 per GB build artifacts stored	S3標準ストレージの場合、最初の50TB/月までは $0.025/GB(東京リージョン)
インターネットへの配信	$0.15/GB	$0.15 per GB served (data transfer out)	CloudFront 最初の10TB/月までは $0.114/GB(東京エリア)